<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>图片搜索App</title>
  <link rel="stylesheet" href="style.css" />
  <!-- <script src="./axios.js"></script> -->
</head>

<body>
  <h1>图片搜索</h1>
  <form>
    <input type="text" id="search-input" placeholder="搜索图片" />
    <button id="search-button">搜索</button>
  </form>
  <div class="search-results">
    <!-- <div class="search-result">
      <img
        src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
        alt="image" />
      <a href="https://unsplash.com/photos/g-7X6T7vAI4" target="_blank" rel="noopener noreferrer">an image of a
        beach</a>
    </div>
    <div class="search-result">
      <img
        src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
        alt="image" />
      <a href="https://unsplash.com/photos/g-7X6T7vAI4" target="_blank" rel="noopener noreferrer">an image of a
        beach</a>
    </div>
    <div class="search-result">
      <img
        src="https://plus.unsplash.com/premium_photo-1664361480561-3bdcd6eb3b6f?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8bmF0dXJlfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=1000&q=60"
        alt="image" />
      <a href="https://unsplash.com/photos/g-7X6T7vAI4" target="_blank" rel="noopener noreferrer">an image of a
        beach</a>
    </div> -->
  </div>
  <button id="show-more-button">显示更多</button>
</body>
<script src="./axios.js"></script>
<script src="./pxmu.min.js"></script>
<script>
  let limit = 3
  let page = 1
  let titleLike = ''
  const inputbox = document.querySelector('#search-input')
  async function getData() {
    try {
      let res = await axios({
        url: 'https://jsonplaceholder.typicode.com/photos',
        params: {
          _page: page,
          _limit: limit,
          title_like: titleLike
        }
      })
      // console.log(res.data);
      return res.data
    } catch {
      pxmu.fail('搜索失败')
    }

  }
  async function xuanran() {
    let data = await getData()
    // console.log(data);
    let str = ''
    data.forEach(item => {
      str += `
      <div class="search-result">
        <img
          src="${item.url}"
          alt="image" />
        <a href="${item.thunbnailUrl}" target="_blank" rel="noopener noreferrer">${item.title}</a>
      </div>
      `
      document.querySelector('.search-results').innerHTML += str
    })
  }
  // xuanran()

  document.querySelector('#search-button').addEventListener('click', async function (e) {
    e.preventDefault()
    titleLike = inputbox.value
    let data = await getData()
    // console.log(data)
    if (titleLike === '' || data.length == 0) {
      pxmu.fail('请求数据搜索失败，请检查输入值不能为空')
    } else {
      xuanran()
      document.querySelector('#show-more-button').style.display = 'block'
    }
  })
  document.querySelector('#show-more-button').addEventListener('click', function () {
    page++
    xuanran()
  })
</script>

</html>